<template>
  <!-- 主页标示图 -->
  <div class="wrap">
    <div class="fast-register-box top-sign-box">
      <div class="inner home-inner" style="padding: 20px 0;">
        <!-- 下面是一个轮播图！！！ -->
        <el-carousel height="240px" :interval="4000" type="card" v-if="ads">
          <el-carousel-item v-for="(img, index) in ads" :key="index">
            <img :src="$main.host+img.imgUrl" style="object-fit: scale-down; width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 首页搜索 -->
    <div class="column-search-panel search-panel-new">
      <div class="inner home-inner">
        <div class="search-box is-login">
          <!-- 搜索共用组件 -->
          <Search></Search>
          <div class="search-hot">
            <b>热门职位:</b>
            <a href="/c101280600/?query=%E7%AE%97%E6%B3%95%E7%A0%94%E7%A9%B6%E5%91%98&amp;industry=&amp;position="
              ka="hot-position-1">算法研究员</a>
            <a href="/c101280600/?query=Cocos&amp;industry=&amp;position=" ka="hot-position-2">Cocos</a>
            <a href="/c101280600/?query=UE4&amp;industry=&amp;position=" ka="hot-position-3">UE4</a>
            <a href="/c101280600/?query=%E6%8A%80%E6%9C%AF%E7%BE%8E%E6%9C%AF&amp;industry=&amp;position="
              ka="hot-position-4">技术美术</a>
            <a href="/c101280600/?query=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0&amp;industry=&amp;position="
              ka="hot-position-5">机器学习</a>
            <a href="/c101280600/?query=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0&amp;industry=&amp;position="
              ka="hot-position-6">深度学习</a>
            <a href="/c101280600/?query=%E8%AF%AD%E9%9F%B3%E7%AE%97%E6%B3%95&amp;industry=&amp;position="
              ka="hot-position-7">语音算法</a>
            <a href="/c101280600/?query=%E5%9B%BE%E5%83%8F%E7%AE%97%E6%B3%95&amp;industry=&amp;position="
              ka="hot-position-8">图像算法</a>
            <a href="/c101280600/?query=Hadoop&amp;industry=&amp;position=" ka="hot-position-9">Hadoop</a>
            <a href="/c101280600/?query=%E6%8A%80%E6%9C%AF%E6%80%BB%E7%9B%91&amp;industry=&amp;position="
              ka="hot-position-10">技术总监</a>
          </div>
        </div>
      </div>
    </div>

    <!-- main主体 -->
    <div id="main" class="inner home-inner">
      <!-- 校园招聘入口 -->
      <ul class="campus-entry">
        <li v-for="(recruit, index) in recruitList" :key="index">
          <a :href="recruit.url" target="_blank" class="campus-entry-link">
            <div class="campus-entry-img">
              <img :src="baseUrl + recruit.imgUrl" alt="校园招聘" />
            </div>
            <div class="title">{{ recruit.title }}</div>
            <div class="content">{{ recruit.content }}</div>
          </a>
        </li>
      </ul>
      <!-- echarts行业树状图 -->
      <div class="echarts-tree-show">
        <template v-if="searchResult">
          <div class="back-tree" @click="back"></div>
          <ul class="search-result" v-if="resultOk">
            <li v-for="(job, index) in jobs" :key="index">
              <div class="jobInfo">
                <div>
                  <span class="job-name">{{ job.name }}</span><span class="job-position">{{ job.jobarea }}</span>
                </div>
                <div class="taglist">
                  <span class="salary">{{ job.salary }}</span>
                  <span v-for="(tag, index) in job.tags.split('\n')" :key="index" class="tag">{{
                    tag
                  }}</span>
                </div>
              </div>
              <div class="company-info">
                <div>
                  <img :src="job.companyImg" alt="" />
                </div>
                <div class="company-footer">
                  <span class="company-name">{{ job.company }}</span>
                  <div>
                    <span v-for="(item, index) in job.companyBusiness.split(' ')" :key="index" class="business">{{ item
                      }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </template>
        <template v-else>
          <div class="tree-search">
            <input type="搜索" placeholder="输入行业进行搜索" class="tree-search-input" v-model="searchValue" />
            <button class="search-btn" @click="search">搜索</button>
          </div>

          <div :style="{ width: width, height: height }" class="echarts-tree">
            <ECharts :option="option"></ECharts>
          </div>
        </template>
      </div>
      <!-- 行业热度排行榜 -->
        <aside class="hot-list" @click="toggle" :style="slideOut?slideStyle.out:slideStyle.in" v-show="hot">
          <div class="title">
            各地招聘需求量排名 <span class="change" @click="changeTop"></span>
          </div>
          <div v-for="city in hotCity" :key="city.rank" class="item">
            <span :class="{
              'hot-dot1': city.rank <= 3,
              'hot-dot2': city.rank > 3
            }">{{ city.rank }}</span>
            <span>{{ city.cityName }}</span>
            <div class="hot-after">
              <span>{{ city.hot }}</span>
              <span class="hot-dot3"></span>
            </div>
          </div>
        </aside>
        <aside class="hot-list" @click="toggle" :style="slideOut?slideStyle.out:slideStyle.in" v-show="!hot">
          <div class="title">
            热门招聘行业 TOP10 <span class="change" @click="changeTop"></span>
          </div>
          <div v-for="job in hotJobs" :key="job.rank" class="item">
            <span :class="{
              'hot-dot1': job.rank <= 3,
              'hot-dot2': job.rank > 3
            }">{{ job.rank }}</span>
            <span>{{ job.workName }}</span>
            <div class="hot-after">
              <span>{{ job.hot }}</span>
              <span class="hot-dot3"></span>
            </div>
          </div>
        </aside>
    </div>
  </div>
  <!-- 底部Footer -->
  <!-- <Footer></Footer>
    <FooterLink></FooterLink> -->
</template>

<script setup lang="ts" name="Home">
import {getAdData , getRecruitData ,getWebData,getWorkCityHot} from "@/api/mock"
import Search from '@/components/searching/index.vue'
import ECharts from '@/components/reEcharts/index.vue'
const baseUrl = ref('/api/images/assets/')
const recruitList = ref<Array<any>>([])
const searchResult = ref(false)
const searchValue = ref('')
const resultOk = ref(false)
const jobs = ref<Array<any>>([])
const hotJobs = ref<Array<any>>([])
const hotCity = ref<Array<any>>([])
const hot = ref(true)
const ads = ref<Array<any>>([])
// test



getRecruitData().then((val) => {
  recruitList.value = val
})


getWebData().then((val) => {
  jobs.value = val
  resultOk.value = true
})
getWorkCityHot().then((val) => {
  hotCity.value = val.city
  hotJobs.value = val.work
})
getAdData().then((val) => {
  ads.value = val
})

//树图配置项
const width = ref('100%')
const height = ref('400px')
const option = ref({
  title: {
    text: '行业树状图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      data: [
        {
          name: '行业',
          children: [
            {
              name: '互联网',
              children: [
                { name: '软件工程师' },
                { name: '数据科学家' },
                { name: '系统架构师' },
                { name: '网络安全专家' },
                { name: '人工智能工程师' },
                { name: '嵌入式系统工程师' },
                { name: '物联网工程师' },
                { name: '大数据工程师' },
                { name: '前端开发工程师' },
                { name: '云计算工程师' },
                { name: '区块链工程师' },
                { name: '自然语言处理专家' },
                { name: '软件测试工程师' },
                { name: '人机交互设计师' },
                { name: '网络工程师' },
                { name: '数据库管理员' },
                { name: 'DevOps工程师' },
                { name: '人机交互设计' },
                { name: '区块链开发' },
                { name: '自动化测试' },
                { name: '大数据分析' },
                { name: '敏捷开发' },
                { name: '云安全' },
                { name: 'UI/UX设计' }
              ]
            },
            {
              name: '金融',
              children: [{ name: '银行' }, { name: '证券' }, { name: '保险' }],
              collapsed: true
            },
            {
              name: '教育',
              children: [
                { name: '幼儿园' },
                { name: '小学' },
                { name: '初中' },
                { name: '高中' },
                { name: '大学' }
              ],
              collapsed: true
            },
            {
              name: '新能源',
              children: [
                { name: '电力工程师' },
                { name: '电气工程师' },
                { name: '电力系统工程师' },
                { name: '电气设计工程师' }
              ],
              collapsed: true
            },
            {
              name: '医疗',
              children: [
                { name: '医生' },
                { name: '护士' },
                { name: '药剂师' },
                { name: '医学影像师' },
                { name: '医学检验师' },
                { name: '医学研究员' },
                { name: '医学编辑' },
                { name: '医学统计员' },
                { name: '医学信息员' },
                { name: '医学设备工程师' },
                { name: '医学销售员' },
                { name: '医学技术员' },
                { name: '医学顾问' }
              ],
              collapsed: true
            },
            {
              name: '建筑',
              children: [
                { name: '建筑师' },
                { name: '结构工程师' },
                { name: '土木工程师' },
                { name: '给排水工程师' },
                { name: '暖通工程师' },
                { name: '电气工程师' },
                { name: '道路工程师' },
                { name: '桥梁工程师' },
                { name: '港口工程师' },
                { name: '机电工程师' },
                { name: '城市规划师' },
                { name: '园林设计师' },
                { name: '室内设计师' },
                { name: '景观设计师' },
                { name: '建筑工程师' },
                { name: '建筑设计师' },
                { name: '建筑装饰设计师' },
                { name: '建筑制图员' },
                { name: '建筑工程管理师' },
                { name: '建筑工程造价师' },
                { name: '建筑工程监理师' },
                { name: '建筑工程质量管理师' },
                { name: '建筑工程安全管理师' },
                { name: '建筑工程测量员' },
                { name: '建筑工程审图员' },
                { name: '建筑工程验收员' },
                { name: '建筑工程测量员' },
                { name: '建筑工程招标员' },
                { name: '建筑工程验收员' },
                { name: '建筑工程审图员' },
                { name: '建筑工程测量员' }
              ],
              collapsed: true
            }
          ]
        }
      ],
      itemStyle: {
        color: '#B3E5FC'
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      label: {
        position: 'left',
        verticalAlign: 'middle',
        align: 'right'
      },
      symbolSize: 10,
      animationEasing: 'linear'
    }
  ]
})
//搜索事件
const search = () => {
  searchResult.value = true
}
//返回树图
const back = () => {
  searchResult.value = false
}
//切换top
const changeTop = () => {
  hot.value = !hot.value
  slideOut.value=!slideOut.value
}
/* 功能点二：将token带给服务端，请求用户信息和一些需要token的信息 */


/* aside侧边栏进行弹出缩进:这里主要是对样式进行操作 */
const slideOut=ref(false)
const toggle=()=>{
  slideOut.value=!slideOut.value
}
const slideStyle={
  out:{
    transform:'translate(0%,-45%)'
  },
  in:{
    transform:'translate(100%,-45%)'
  }
}

</script>

<style scoped>
.wrap {
  background: var(--childThemeColor);
}

/* 主页标示图 */
.fast-register-box.top-sign-box {
  height: 240px;
  position: relative;
  z-index: 4;
  padding-top: 0;
}

.top-sign-box .inner {
  position: relative;
  height: 100%;
  margin: 0 auto;
  zoom: 1;
}

.fast-register-box.top-sign-box .home-inner {
  width: 1084px;
}

.fast-register-box .icon-tip {
  float: left;
  height: 120px;
  margin: 0 35px 0 0;
}

/* 首页搜索 */
.column-search-panel {
  position: relative;
  z-index: 3;
}

.column-search-panel .inner {
  width: 1184px;
  margin: 0 auto;
  zoom: 1;
}

.column-search-panel .home-inner {
  max-width: 1184px;
}

.column-search-panel .search-box {
  width: 900px;
  padding-top: 24px;
  margin: 0 auto;
  position: relative;
  font-size: 13px;
}

/* 搜索框下面的热门职位！！！ */
.column-search-panel .search-box .search-hot {
  height: 41px;
  margin-bottom: 20px;
  overflow: hidden;
  box-sizing: border-box;
  width: 794px;
  color: #757575;
  font-size: 14px;
  padding: 16px 0 32px 0;
}

.search-hot b {
  margin-right: 12px;
  font-weight: 400;
  display: inline-block;
}

.search-hot a {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  color: RGB(96, 112, 201);
  font-size: 14px;
  line-height: 20px;
  padding: 2px 8px;
  margin-right: 12px;
  margin-bottom: 10px;
  display: inline-block;
}

/* 主体main样式 */
/* 左侧菜单内容 */
#main {
  position: relative;
  width: 1184px;
  margin: 0 auto;
  zoom: 1;
}

.campus-entry {
  display: flex;
  /* justify-content: start; */
  margin-top: 16px;
  flex-wrap: wrap;
}

.campus-entry li {
  width: 250px;
  margin-right: 45px;
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.campus-entry li .campus-entry-link {
  display: block;
  text-align: center;
}

.campus-entry li .campus-entry-img,
.campus-entry li img {
  width: 175px;
  height: 116px;
  margin: 0 auto 10px;
  overflow: hidden;
  transition: all 0.2s linear;
}

.campus-entry li:hover {
  box-shadow: var(--boxShadow);
}

.campus-entry li:hover img {
  transform: scale(1.1);
}

.campus-entry li .title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.campus-entry li .content {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.echarts-tree-show {
  position: relative;
  margin-top: 32px;
  margin-bottom: 20px;
  box-shadow: var(--boxShadow);
  padding: 16px;
  height: 400px;
  overflow: auto;
}

.tree-search {
  position: absolute;
  display: flex;
  z-index: 1000;
}

.tree-search-input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px 0 6px 6px;
  margin-right: 16px;
}

.search-btn {
  padding: 6px 12px;
  color: #fff;
  border: none;
  border-radius: 8px;
  background: var(--btnBgColor);
  /* 改变鼠标移入样式为手 */
  cursor: pointer;
}

.search-btn:hover {
  background: var(--btnHoverBgColor);
}

.back-tree {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  color: #fff;
  background: var(--btnBgColor);
}

.back-tree:hover {
  background: var(--btnHoverBgColor);
}

.back-tree::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: url('../../../assets/icons/back.svg') no-repeat center;
  background-size: 50%;
  z-index: 1000;
}

.back-tree:hover::after {
  background-size: 60%;
}

.hot-list {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  right: 0;
  top: 50%;
  /* transform: translate(0,-45%); */
  width: 300px;
  height: 500px;
  background: #fff;
  box-shadow: var(--boxShadow);
  z-index: 1000;
  padding: 6px 0;
  /* overflow: hidden; */
  transition: all 0.2s linear;
  /* transform: translate(100%,-45%); */
  pointer-events: none;
  border-radius: 10px 0 0px 20px;
}
.hot-list::before{
  content: "HOT";
  color: #d7d7d7;
  box-sizing: border-box;
  padding: 10px;
  padding-left: 8px;
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: rebeccapurple;
  position: absolute;
  left: -45px;
  top: 0;
  border-radius: 0px 10px 0 20px;
  pointer-events: all;
  cursor: pointer;
}

.hot-list .title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
  padding: 6px 12px;
  font-weight: 600;
}

.title .change {
  background: url('../../../assets/icons/切换.svg') no-repeat center;
  background-size: 100%;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  cursor: pointer;
  pointer-events: all;
}

.change:hover {
  background-size: 120%;
}

.hot-list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 2px 12px;
  cursor: pointer;
}

.hot-list .item:hover {
  background: #dedede;
  transition: all 0.2s linear;
}

[class^='hot-dot'] {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 20px;
  height: 20px;
}

.hot-dot1 {
  background: url('../../../assets/icons/hot1.svg') no-repeat center;
  background-size: 100%;
}

.hot-dot2 {
  background: url('../../../assets/icons/hot2.svg') no-repeat center;
  background-size: 100%;
}

.hot-dot3 {
  background: url('../../../assets/icons/hot3.svg') no-repeat center;
  background-size: 100%;
}

.hot-after {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result {
  display: flex;
  padding-top: 50px;
  background-color: #ededed;
  flex-direction: column;
  justify-content: center;
}

.search-result li {
  display: flex;
  align-items: center;
  height: 100px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 12px;
  padding: 2px 12px;
  background-color: #fff;
  cursor: pointer;
}

.search-result li:hover {
  box-shadow: var(--boxShadow);
  transition: all 0.2s linear;
}

.jobInfo {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
}

.job-name {
  font-size: var(--font-20);
  color: #333;
  margin-right: 16px;
}

.taglist {
  display: flex;
  align-items: center;
}

.salary {
  color: #ff0000;
  margin-right: 16px;
}

.tag {
  background: #d7d7d7;
  color: #585858;
  padding: 2px 8px;
  border-radius: 8px;
  margin-right: 8px;
}

.company-info {
  display: flex;
  flex: 1;
  align-items: center;
  text-align: start;
  height: 100%;
  justify-content: start;
}

.company-info img {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.company-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 20px;
}

.company-name {
  display: inline-block;
  text-align: start;
  font-size: var(--font-16);
  color: #333;
}

.business {
  display: inline-block;
  font-size: var(--font-14);
  color: #585858;
  margin-right: 8px;
  background-color: #d7d7d7;
  padding: 2px 8px;
  border-radius: 8px;
}
</style>
